カップラーメンを待ってる間に出来るVue.js実行環境 #Amplify #Vue.js

カップラーメンを待ってる間に出来るVue.js実行環境 #Amplify #Vue.js

Clock Icon2019.07.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

CX事業本部でマネージャーをやってますアンディです。最近とある案件でVue.jsを触り始めました。Vue.jsのCD環境を作ってたらカップラーメンが出来上がるのを待ってる間に構築出来てしまったので手順を共有したいと思います。

作り方

Amplifyの設定(1分)

AWSのAmplifyコンソールを立ち上げて、「アプリを作成」を押下します。

Gitプロバイダを選択します。ここではGitHubを選択します。

 

GitHubの認証画面が表示された場合は、GitHubアカウントを確認しつつ「Authorize aws-amplify-console」を押下しましょう。

リポジトリを選択します。まだ用意できていない方はGitHubにSign inして作りましょう。

 

ビルドの設定はひとまずそのままで。

 

「保存してデプロイ」ボタンを押下してアプリを作成しましょう。

Visual Studio Codeの設定(1分)

拡張機能「Vetur」をインストールします。ESLintも入れたいところですがこれだけでも十分です。

VSCodeがインストールされていない場合はケトルが無いのと一緒なのでこちらへ(=゚ω゚)ノ

GitHub Desktopの設定(2分)

GitHubのリポジトリをブラウザで表示して「Open in Desktop」を押下します。

GitHub Desktopがインストールされていない場合は箸が無いのと一緒なのでこちらへ(=゚ω゚)ノ

これでCD環境の準備完了です!簡単でしたね!ちょうどどん兵衛を作っていたので5分以内で完成しました。

デプロイしてみる

Vue公式のチュートリアルを参考にしながらHello Worldを出してみましょう。

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="./index.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
view raw index.js hosted with ❤ by GitHub

リポジトリにPushします。

しばらく待ちましょう・・・

検証まで進んだらURLをクリックするとデプロイしたWebページが表示されます。

無事表示されました!Amplifyを使用することで非常に簡単にCD環境が構築できました。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.